<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { computed } from 'vue'
const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  viewType: {
    type: String,
    default: 'add'
  }
})
const editProp = ref<any>(['precisePosition', 'operateDateStart'])
const tableData = ref<any>([{
  precisePosition: '5-2 煤二盘区水仓变电所140.1米',
  operateDateStart: '2022-03-01 09:00:00'
}])
const ruleFormRef = ref<FormInstance>()
const rules = ref<FormRules>({
  tourStaff: [
    { required: true, message: '请选择巡检人员', trigger: 'change' }
  ],
  operateDateStart: [
    { required: true, message: '请选择出入井时间', trigger: 'change' }
  ]
})
const formData = ref<any>({
  tourStaff: '',
  operateDateStart: '',
  operateDateEnd: ''
})
const staffList = ref<any>([
  {
    code: '1',
    name: '张三'
  },
  {
    code: '2',
    name: '李四'
  }
])
const daterange = ref<any>([])
const editIndex = ref(-1)
const dateChange = (val: any) => {
  formData.value.operateDateStart = val[0]
  formData.value.operateDateEnd = val[1]
}

function handleDele(row: any) {
  try {
    const index = tableData.value.findIndex((item: any) => item.id === row.id)
    tableData.value.splice(index, 1)
  } catch (error) {
    console.log(error)
  }
}

function handleEdit(row: any) {
  editIndex.value = tableData.value.indexOf(row)
  console.log(editIndex.value,'====a.value')
}

async function addSubmit() {
  ruleFormRef.value && ruleFormRef.value.validate(async (valid: any) => {
    if (valid) {
      tableData.value.push(formData.value)
      console.log(formData.value)
    }
  })
}

function handleSave(row: any) {
  editIndex.value = -1
  console.log(tableData.value)
}

</script>

<template>
  <!-- <el-card> -->
    <div>
      <el-form
      ref="ruleFormRef"
      :model="formData"
      label-position="right"
      label-width="100px"
      :rules="rules"
      :disabled="props.viewType === 'view'"
>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="巡检人员" prop="tourStaff">
              <el-select v-model="formData.tourStaff" clearable>
                <el-option v-for="item in staffList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出入井时间" prop="operateDateStart">
              <el-date-picker
                  v-model="daterange"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  type="datetimerange"
                  style="width: 100%;"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="dateChange"
                />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button>选择模版</el-button>
            <el-button type="primary" @click="addSubmit">添加位置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="tableData"
        border
        style="width: 100%;"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="precisePosition" label="精确位置" min-width="180" align="center">
          <template #default="scope">
            <span v-show="scope.$index !== editIndex">{{ scope.row.precisePosition }}</span>
            <el-input
              v-show="scope.$index === editIndex"
              v-model="scope.row.precisePosition"
            />
          </template>
        </el-table-column>
        <el-table-column prop="operateDateStart" label="时间" min-width="150" align="center">
          <template #default="scope">
            <span v-show="scope.$index !== editIndex">{{ scope.row.operateDateStart }}</span>
            <el-date-picker
              v-if="scope.$index === editIndex"
              v-model="scope.row.operateDateStart"
              style="width: 100%;"
              type="datetime"
              placeholder="请选择时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY/MM/DD HH:mm:ss"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="150">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)" :disabled="props.viewType === 'view'">
              编辑
            </el-button>
            <el-button type="primary" size="small" v-show="scope.$index === editIndex" @click="handleSave(scope.row)">保存</el-button>
            <el-button type="danger" size="small" @click="handleDele(scope.row)" :disabled="props.viewType === 'view'">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-divider content-position="left">销售渠道信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="销售渠道代码">
            C709548764585985
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="销售渠道名称">
            吴克彪
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="渠道返佣比例">
            28%
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="二级渠道">
            20
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="三级渠道">
            无
          </el-form-item>
        </el-col>
      </el-row> -->
    </div>
  <!-- </el-card> -->
</template>
<style lang='scss' scope></style>
